<!--
*Author：COCO
 *代码由框架生成,任何更改都可能导致被代码生成器覆盖
 *业务请在@/extension/custom/custom/Base_DefectItem.js此处编写
 -->
<template>
    <div class="app-container">
        <view-grid ref="gridRef"
                   :columns="columns"
                   :detail="detail"
                   :editFormFields="editFormFields"
                   :editFormOptions="editFormOptions"
                   :searchFormFields="searchFormFields"
                   :searchFormOptions="searchFormOptions"
                   :table="table"
                   :extend="extend"
                   >
            <template #toolbar>
                <el-button type="primary" @click="handleAdd">新增</el-button>
                <!-- 移除批量排程按钮 -->
                <!-- <el-button type="success" @click="handleBatchSchedule" :disabled="!selectedRows.length">批量排程</el-button> -->
            </template>
        </view-grid>
        <!-- *** 添加排程弹框组件 *** -->
        <SchedulingModal
          v-model:visible="showSchedulingModal"  
          :planData="schedulingData"    
          @scheduled-success="handleSchedulingSuccess"
        />
    </div>
</template>
<script>
import extend from "@/extension/productmanage/productmanage/ProductionPlanningm.js";
import { ref, defineComponent ,reactive, onMounted} from "vue";
import http from '@/api/http';
import { ElMessageBox, ElMessage } from 'element-plus';
import SchedulingModal from '../productmanage/productplan/SchedulingModal.vue';
import productplanbody from '@/extension/productmanage/productmanage/product_extend/productplanbody.vue'; // 引入 productplanbody 组件
// *** 在 setup 中定义控制排程弹框显示的状态 ***
const showSchedulingModal = ref(false);
// *** 在 setup 中定义存储当前排程计划数据的状态 ***
const schedulingData = ref(null);

// 移除选中的行数据状态
// const selectedRows = ref([]);

    export default defineComponent({
        setup() {
            const table = ref({
                key: 'ProductionPlanningId',
                footer: "Foots",
                cnName: '生产计划',
                name: 'productmanage/productmanage/ProductionPlanning',
                url: "/ProductionPlanning/",
                sortName: "CreateDate"
            });
            const editFormFields = ref({"ProductionPlanningCode":"","ReportworkNum":"","ProductionOrderId":"","ProductId":"","ProcessmanagementId":""});
            const editFormOptions = ref([[{"title":"生产计划编号","field":"ProductionPlanningCode","type":"text"},
                               {"title":"报工数量","required":true,"field":"ReportworkNum","type":"text"}],
                              [{"title":"生产订单主键","field":"ProductionOrderId","type":"guid"},
                               {"title":"成品主键","field":"ProductId","type":"guid"}],
                              [{"title":"工艺路线","field":"ProcessmanagementId","type":"guid"}]]);
            const searchFormFields = ref({"ProductionPlanningCode":""});
            // ,{"title":"不良品项名称","field":"DefectItemName","type":"like"}
            const searchFormOptions = ref([[{"title":"生产计划编号","field":"ProductionPlanningCode","type":"like"}]]);
            const columns = ref([{field:'ProductionPlanningId',title:'生产计划主键',type:'guid',width:110,hidden:true,readonly:true,require:true,align:'left'},
                       {field:'ProductionPlanningCode',title:'生产计划编号',link:true,type:'string',sort:true,width:180,align:'left',sort:true},
                       {field:'ReportworkNum',title:'报工数量',type:'int',sort:true,width:180,require:true,align:'left'},
                       {field:'ProcessmanagementId',title:'工艺路线',type:'guid',sort:true,width:180,require:true,align:'left'},
                       {field:'ProductId',title:'成品主键',type:'guid',width:220,align:'left'},
                       {field:'ProductionOrderId',title:'生产订单主键',type:'guid',width:220,align:'left'},
                       {field:'PlanningStartDate',title:'计划开始日期',type:'datetime',sort:true,width:110,align:'left'},
                       {field:'PlanningEndDate',title:'计划结束日期',type:'datetime',width:110,align:'left',sort:true},
                       {field:'ActualStartDate',title:'实际开始日期',type:'datetime',width:130,align:'left'},
                       {field:'ActualEndDate',title:'实际结束日期',type:'datetime',width:130,align:'left'},
                       {field:'CreateDate',title:'创建时间',type:'datetime',width:110,align:'left',sort:true},
                       {field:'Creator',title:'创建人',type:'string',width:80,hidden:true,align:'left'}, 
                       {field:'Priority',title:'优先级',type:'int',width:110,align:'left'},
                       {field:'Creator',title:'创建人',type:'string',width:80,hidden:true,align:'left'}, 
                       {field:'CurrentPlanNum',title:'本次计划数量',type:'int',width:80,hidden:true,align:'left'},
                        {
            title: '操作', // 列的标题
            field: 'operation',
            width: 100,
            align: 'center',
            render: (h, { row, column, index }) => {
            return h('div', {}, [
                h('a', { // 创建一个 <a> 标签
                    style: { // 添加内联样式使其显示为蓝色，并添加手型光标
                        color: 'blue',
                        cursor: 'pointer',
                        marginRight: '10px' // ***添加右外边距，可以调整数值***
                    },
                    // href: 'javascript:void(0);', // 可以这样设置href避免页面跳转
                    onClick: () => {
                        handleAbolish(row); // 直接调用混入的方法
                    }
                }, '作废') , // 链接文本
                h('a', { // 或者 h('el-button', { props: { ... } }, '排程')
                    style: { /* 样式 */ 
                        color: 'blue',
                        cursor: 'pointer'
                    },
                    onClick: () => { // 绑定点击事件
                        handleSchedule(row); // 调用组件内部的 handleSchedule 方法
                    }
                }, '排程')// 按钮文本

            ]);
            }
        }]);
            const detail = ref({
                cnName: "#detailCnName",
                table: "#detailTable",
                columns: [],
                sortName: "",
                key: ""
            });
                 // **在这里定义处理作废的方法**
            const handleAbolish = (row) => {
            console.log("在 Vue 文件中进入 handleAbolish，row 参数:", row);

            ElMessageBox.confirm('该生产计划正在进行中，确定作废吗?', '作废确定', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true,
            })
            .then(() => {
                const planningId = row.ProductionPlanningId;
                if (!planningId) {
                    ElMessage.error("无法获取生产计划ID，无法作废。");
                    return;
                }
                const requestBody = [planningId];
                const apiUrl = 'http://localhost:9991/api/ProductionPlanning/cancelPlans'; // **请再次确认API地址**
                console.log("在 Vue 文件中发送请求到 URL:", apiUrl, "，请求体:", requestBody);
                // **使用导入的 http 客户端发送请求**
                    http.post(apiUrl, requestBody) // 直接使用导入的 http 对象
                    .then(response => {
                        console.log("API 响应:", response);
                        if (response.status === true) {
                        ElMessage.success('生产计划已作废成功！');
                        if (typeof this.search === 'function') { // 检查 ref 和 search 方法是否存在
                            this.search(); // ***调用 view-grid 实例的 search 方法***
                            console.log("已调用 gridRef.value.search() 刷新表格"); // 添加日志确认调用
                        } else {
                            console.warn("无法通过 ref 访问 view-grid 实例或其 search 方法.");
                        }
                        // **如何刷新表格？**
                        // 在 setup 中可能需要通过 ref 访问 view-grid 组件实例并调用其刷新方法
                        // 例如：gridRef.value.search(); // 如果 view-grid 组件通过 ref 暴露了 search 方法
                        // 或者您需要找到框架提供的全局或注入的刷新方法
                        } else {
                            console.log('失败信息',response)
                        const errorMessage = (response && response.data && response.data.message) || '未知错误';
                        ElMessage.error('作废失败：' + errorMessage);
                        }
                    })
                    .catch(error => {
                        console.log('失败信息',response)
                        console.error('调用作废API时发生错误:', error);
                        ElMessage.error('作废接口调用出错，请检查网络或后台服务。');
                    });

                })
                .catch(() => {
                    ElMessage({ type: 'info', message: '已取消作废' });
                });
            };
            const responsebody=reactive({
            "page": 0,
            "rows": 0,
            "total": 0,
            "tableName": "string",
            "sort": "string",
            "order": "string",
            "wheres": "string",
            "export": true,
            "value": {}
            });
            const handleSchedule = (row) => { 
                console.log("在 Vue 排程排程文件 setup 中进入 handleSchedule，row 参数:", row);
                
                // 获取机床数据
                const apiUrl = 'http://localhost:9991/api/MachineTool/GetPageData';
                http.post(apiUrl, responsebody)  // 发送空对象作为请求体
                    .then(response => {
                        console.log("机床数据API响应:", response);
                        // 获取工人工时数据
                        const workerApiUrl = 'http://localhost:9991/api/WorkingHours/GetPageData';
                        return http.post(workerApiUrl, responsebody).then(workerResponse => {
                            // 创建要传递给弹框的数据对象，确保所有属性都被包含
                            schedulingData.value = {
                                plans: [row], // 将单个计划放入数组，以匹配弹框 props 结构
                                machineList: response.rows || [], // 确保是数组，处理 null 或 undefined
                                workerHours: workerResponse.rows || [] // 确保是数组，处理 null 或 undefined
                            };
                            console.log('赋值给 schedulingData.value 的数据:', schedulingData.value);
                            
                            // 更新状态并显示排程弹框
                            showSchedulingModal.value = true;
                        });
                    })
                    .catch(error => {
                        console.error('获取数据时发生错误:', error);
                        ElMessage.error('获取数据失败，请检查网络或后台服务');
                    });
            };
            const handleSchedulingSuccess = () => {
                console.log("在 Vue 文件中进入 handleSchedulingSuccess");
                // *** 调用 view-grid 实例的 search 方法刷新表格 ***
                if (this.$refs.gridRef && typeof this.$refs.gridRef.search === 'function') { // 检查 ref 和 search 方法是否存在
                    this.$refs.gridRef.search();
                    console.log("已调用 gridRef.value.search() 刷新表格"); // 添加日志确认调用
                } else {
                    console.warn("无法通过 ref 访问 view-grid 实例或其 search 方法.");
                    // 可能需要其他刷新表格的方式，取决于您的框架
                }
            };
            return {
                table,
                extend,
                editFormFields,
                editFormOptions,
                searchFormFields,
                searchFormOptions,
                columns,
                detail,
                handleAbolish: extend.methods.handleAbolish, 
                // 或者 extend.handleAbolish，取决于 ProductionPlanning.js 的导出方式
                  // *** 在 setup 返回中暴露状态和方法给模板 ***
                showSchedulingModal, // 暴露控制弹框显示的状态
                schedulingData, // 暴露存储当前计划数据的状态
                handleSchedule, // 暴露 handleSchedule 方法
                handleSchedulingSuccess,
                // 移除批量排程相关的暴露
                // selectedRows,
                // handleSelectionChange,
                // handleBatchSchedule
            };
            // *** 在 setup 中定义处理排程按钮点击事件的方法 ***

        },
        components: { // *** 在 components 选项中注册组件 ***
          SchedulingModal,
          productplanbody // 注册 productplanbody 组件
        }
    });

</script>
